<template>
    <m-card
        class="m-theme-box"
        :style="{ 'background-image': `url(${backurl})` }"
        :card-content-style="direction == 1 ? colCardContentStyle : cardContentStyle"
    >
        <view
            v-for="item in items"
            class="m-theme-content"
            :style="direction == 1 ? colThemeContendStyle : themeContendStyle"
        >
            <m-card
                v-for="subitem in item"
                :card-style="direction == 1 ? colItemCardStyle : itemCardStyle"
                card-content-style="height: 100%"
            >
                <image
                    :src="subitem.imageUrl"
                    @click="goto(subitem.pageUrl)"
                    mode="scaleToFill"
                    :style="direction == 1 ? colImageStyle : imageStyle"
                />
            </m-card>
        </view>
    </m-card>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import MCard from '@/components/common/MCard.vue'
const props = defineProps({
    backurl: String,
    items: { type: Array<Array<PageItem>>, default: [] },
    direction: { type: Number, default: 1 }
})

const cardContentStyle = 'display: flex;flex-direction: column;justify-content: flex-end;height: 100%;'
const themeContendStyle = ' display: flex;flex-direction: row;'
const itemCardStyle = '  flex-grow: 1;height: 180rpx;'
const imageStyle = ' width: 100%;height: 170rpx;'

const colCardContentStyle =
    ' display: flex;flex-direction: row;align-items: flex-end;justify-content: stretch;height: 100%;'

const colThemeContendStyle = 'display: flex;flex-direction: column;height: 400rpx;flex-grow: 1;'
const colItemCardStyle = ' height: 400rpx;flex-shrink: 1;'
const colImageStyle = 'width: 100%;height: 100%;'

function goto(params: string) {}
</script>
<style lang="scss" scoped>
.m-theme-box {
    height: 600rpx;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20rpx;
}
</style>
